import {MicroAppLoaderData} from "plain-micro-application";
import ReactDOM from "react-dom";
import {designPage} from "plain-design-composition";
import React from "react";
import {PlRoot} from "plain-design";

export function createReactPageMounter(config: { loaderData: MicroAppLoaderData, Page: any }) {
    const {loaderData: {el, page, tab, onBack, nav}, Page} = config
    if (!Page) {
        throw new Error('Page is undefined')
    }
    return {
        mount: () => {
            const App = designPage(() => {
                onBack((backData) => {
                    console.log('back backData', backData)
                })
                return () => <Page page={page} tab={tab} onBack={onBack} nav={nav}/>
            })
            ReactDOM.render(<PlRoot><App/></PlRoot>, el)
        },
        unmount: () => {
            ReactDOM.unmountComponentAtNode(el)
        }
    }

}